<template>
  <cover-view class="custom-tabBar">
    <cover-view class="custom-tabBar__wrapped">
      <cover-view
        v-for="(item, index) in list"
        :key="index"
        class="tabBar-item"
        @tap="switchTab(index, item.pagePath)"
      >
        <cover-image
          :src="selectedIndex === index ? item.selectedIconPath : item.iconPath"
          class="tabBar-item__icon"
        />
        <cover-view
          :style="{ color: selectedIndex === index ? selectedColor : color }"
          class="tabBar-item__label"
        >
          {{ item.text }}
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";

import "./index.less";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";
defineOptions({
  name: "custom-tabBar",
});

const { selectedIndex, setSelectIndex } = useTabBarSelected();

const color = "#000000";
const selectedColor = "#60B89B";
const list = [
  {
    pagePath: "/pages/home/index",
    text: "首页",
    iconPath: "../assets/tar-bar/index.png",
    selectedIconPath: "../assets/tar-bar/index-selected.png",
  },
  {
    pagePath: "/pages/knowledge/index",
    text: "专业知识",
    iconPath: "../assets/tar-bar/zhishi.png",
    selectedIconPath: "../assets/tar-bar/zhishi-selected.png",
  },
  {
    pagePath: "/pages/test-page/index",
    text: "知识测验",
    iconPath: "../assets/tar-bar/ceyan.png",
    selectedIconPath: "../assets/tar-bar/ceyan-selected.png",
  },
  {
    pagePath: "/pages/jifen/index",
    text: "知识积分",
    iconPath: "../assets/tar-bar/jifen.png",
    selectedIconPath: "../assets/tar-bar/jifen-selected.png",
  },
  {
    pagePath: "/pages/search-page/index",
    text: "知识搜索",
    iconPath: "../assets/tar-bar/sousuo.png",
    selectedIconPath: "../assets/tar-bar/sousuo-selected.png",
  },
];

const switchTab = (index: number, url: string) => {
  setSelected(index);
  Taro.switchTab({ url });
};

const setSelected = (index: number) => {
  setSelectIndex(index);
};
</script>
